<template>
  <div class="main">
    <div class="left">
      <div id="handle"></div>
      <div id="alarm"></div>
      <div id="trend"></div>
      <div id="exigency"></div>
    </div>
    <div class="right">
      <div id="video"></div>
      <div id="corpuscle"></div>
      <div id="security"></div>
      <div id="appOff"></div>
    </div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import useFontSize from "@/hooks/useFontSize";
let { fontSize } = useFontSize();
const router = useRouter();
const route = useRoute();
let chartsColor = "#fff";
// 告警处理
let handleCharts = ref(null);
const handleFn = () => {
  const option = {
    title: {
      text: "告警处理状态统计",
      textStyle: {
        fontSize: 18,
        color: chartsColor,
      },
      top: 10,
      left: 10,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "center",
      left: "60%",
      width: 2 + "vw",
      textStyle: {
        color: chartsColor,
      },
      selectedMode:false,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "50%"],
        center: ["30%", "50%"],
        // avoidLabelOverlap: false,
        label: {
          show: true,
          position: "center",
          formatter: () => {
            let str = 2 + "\n" + `告警总数`;
            return str;
          },
          color: chartsColor,
          lineHeight: 16,
          fontSize: 16,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 2,
            name: "0%" + "\n" + "已完成2",
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#0075fa", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#152337", // 100% 处的颜色
                  },
                ],
                global: false,
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
            },
          },
          { value: 0, name: "0%" + "\n" + `处理中0` },
          { value: 0, name: "0%" + "\n" + `待处理0` },
        ],
      },
      {
        type: "pie",
        center: ["35%", "50%"],
        radius: ["52%", "53.5%"],
        data: [],
      },
    ],
  };
  let handle = document.getElementById("handle");
  handleCharts = echarts.init(handle);
  handleCharts.setOption(option);
};
// 告警
let alarmCharts = ref(null);
const alarmFn = () => {
  const option = {
    title: {
      text: "告警处理状态统计",
      textStyle: {
        fontSize: 18,
        color: chartsColor,
      },
      top: 10,
      left: 10,
    },
    tooltip: {
      trigger: "item",
    },
    grid: {
      left: 0,
      padding: "10%",
    },
    legend: {
      top: "center",
      left: "60%",
      width: 32,
      textStyle: {
        color: chartsColor,
      },
      selectedMode:false,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "50%"],
        center: ["30%", "50%"], //调整圆心位置
        label: {
          show: true,
          position: "center",
          formatter: () => {
            let str = 312 + "\n" + `告警总数`;
            return str;
          },
          color: chartsColor,
          lineHeight: 16,
          fontSize: 16,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 300,
            name: "96.2%" + "\n" + "一般 300",
            itemStyle: {
              borderRadius: 2,
              borderColor: "#a0a0a0",
              borderWidth: 2,
              // borderColor: "#192333",
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#17a1af", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#173140", // 100% 处的颜色
                  },
                ],
              },
            },
          },
          {
            value: 12,
            name: "3.8%" + "\n" + `一般 12`,
            itemStyle: {
              borderRadius: 2,
              borderColor: "#a0a0a0",
              borderWidth: 2,
              // borderColor: "#192333",
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#0f77e7", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#0b3b6f", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        ],
      },
      {
        type: "pie",
        center: ["35%", "50%"],
        radius: ["52%", "53.5%"],
        data: [],
      },
    ],
  };
  let alarm = document.getElementById("alarm");
  alarmCharts = echarts.init(alarm);
  alarmCharts.setOption(option);
};
// 告警趋势
let trendCharts = ref(null);
const trendFn = () => {
  const option = {
    title: {
      text: "告警趋势",
      textStyle: {
        fontSize: 18,
        color: chartsColor,
      },
      top: 10,
      left: 10,
    },
    xAxis: {
      type: "category",
      data: ["08-27", "08-28", "08-29", "08-30", "08-31", "09-01", "09-02"],
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLabel: {
        color:chartsColor,
      },
    },
    yAxis: [
      {
        type: "value",
        interval: 2,
        min: 0,
        max: 12,
        splitLine: { show: false },
        axisLabel: {
          color: chartsColor,
        },
      },
    ],
    series: [
      {
        data: [8, 7, 5, 5, 7, 5, 5],
        type: "line",
        smooth: true,
        areaStyle: {},
        itemStyle: { color: "#2271ca" },
        label: {
          show: true,
          position: "top",
          color:chartsColor,
        },
        symbolSize: 6,
        symbol: "circle",
      },
    ],
  };
  let trend = document.getElementById("trend");
  trendCharts = echarts.init(trend);
  trendCharts.setOption(option);
};
// 紧急告警趋势
let exigencyCharts = ref(null);
const exigencyFn = () => {
  const option = {
    title: {
      text: "紧急告警趋势",
      textStyle: {
        fontSize: 18,
        color: chartsColor,
      },
      top: 10,
      left: 10,
    },
    xAxis: {
      type: "category",
      data: ["08-27", "08-28", "08-29", "08-30", "08-31", "09-01", "09-02"],
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLabel: {
        color: chartsColor,
      },
    },
    yAxis: [
      {
        type: "value",
        interval: 1,
        min: 0,
        max: 5,
        splitLine: { show: false },
        axisLabel: {
          color: chartsColor,
        },
      },
    ],
    series: [
      {
        data: [1, 3, 2, 0, 2, 0, 0],
        type: "line",
        itemStyle: {
          color: "#174d5c",
        },
        smooth: true,
        areaStyle: {},
        label: {
          show: true,
          position: "top",
          color: chartsColor,
        },
        symbolSize: 6,
        symbol: "circle",
      },
    ],
  };
  let exigency = document.getElementById("exigency");
  exigencyCharts = echarts.init(exigency);
  exigencyCharts.setOption(option);
};
// 视频巡更统计
let videoCharts = ref(null);
const videoFn = () => {
  const option = {
    title: {
      text: "视频巡更统计",
      textStyle: {
        fontSize: 18,
        color: chartsColor,
      },
      top: 10,
      left: 10,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "center",
      left: "60%",
      width: 32,
      textStyle: {
        color: chartsColor,
      },
      selectedMode:false,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "50%"],
        center: ["30%", "50%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: "center",
          formatter: () => {
            let str = "5.3% " + "\n" + `告警总数`;
            return str;
          },
          color: chartsColor,
          lineHeight: 16,
          fontSize: 16,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 19,
            name: 19 + "\n" + "总次数",
            itemStyle: {
              // borderWidth:5,
              color: "#1e2632",
              borderRadius: 2,
              borderColor: "#fff",
              borderWidth: 2,
            },
          },
          {
            value: 1,
            name: 1 + "\n" + `已执行`,
            itemStyle: {
              // borderWidth:5,
              color: "#1e76f2",
              borderRadius: 2,
              borderColor: "#fff",
              borderWidth: 2,
            },
          },
        ],
      },
      {
        type: "pie",
        center: ["35%", "50%"],
        radius: ["52%", "53.5%"],
        data: [],
      },
    ],
  };
  let video = document.getElementById("video");
  videoCharts = echarts.init(video);
  videoCharts.setOption(option);
};
// 电子巡更统计
let corpuscleCharts = ref(null);
const corpuscleFn = () => {
  const option = {
    title: {
      text: "电子巡更统计",
      textStyle: {
        fontSize: 18,
        color: chartsColor,
      },
      top: 10,
      left: 10,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "center",
      left: "60%",
      width: 32,
      textStyle: {
        color: chartsColor,
      },
      selectedMode:false,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "50%"],
        center: ["30%", "50%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: "center",
          formatter: () => {
            let str = "0% " + "\n" + `已执行`;
            return str;
          },
          color: chartsColor,
          lineHeight: 16,
          fontSize: 16,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 1280,
            name: "1,280" + "\n" + "总次数",
            itemStyle: {
              // borderWidth:5,
              color: "#212936",
              borderRadius: 2,
              borderColor: "#fff",
              borderWidth: 2,
            },
          },
          { value: 0, name: 0 + "\n" + `已执行` },
        ],
      },
      {
        type: "pie",
        center: ["35%", "50%"],
        radius: ["52%", "53.5%"],
        data: [],
      },
    ],
  };
  let corpuscle = document.getElementById("corpuscle");
  corpuscleCharts = echarts.init(corpuscle);
  corpuscleCharts.setOption(option);
};
// 安保统计
let securityCharts = ref(null);
const securityFn = () => {
  const option = {
    title: {
      text: "安保统计",
      textStyle: {
        fontSize: 18,
        color: chartsColor,
      },
      top: 10,
      left: 10,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "center",
      left: "60%",
      width: 32,
      textStyle: {
        color: chartsColor,
      },
      selectedMode:false,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "50%"],
        center: ["30%", "50%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: "center",
          formatter: () => {
            let str = "0% " + "\n" + `已执行`;
            return str;
          },
          color: chartsColor,
          lineHeight: 16,
          fontSize: 16,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 40,
            name: "40" + "\n" + "总次数",
            itemStyle: {
              // borderWidth:5,
              // color: "#1e2632",
              color: "#212935",
              borderRadius: 2,
              borderColor: "#fff",
              borderWidth: 2,
            },
          },
          {
            value: 9,
            name: 9 + "\n" + `已执行`,
            itemStyle: {
              color: "#1976ec",
              borderRadius: 2,
              borderColor: "#fff",
              borderWidth: 2,
            },
          },
        ],
      },
      {
        type: "pie",
        center: ["35%", "50%"],
        radius: ["52%", "53.5%"],
        data: [],
      },
    ],
  };
  let security = document.getElementById("security");
  securityCharts = echarts.init(security);
  securityCharts.setOption(option);
};
// app关闭率统计
let appCharts = ref(null);
const appFn = () => {
  let option = {
    title: {
      text: "APP关闭率统计",
      textStyle: {
        fontSize: 18,
        color: chartsColor,
      },
      top: 10,
      left: 10,
    },
    xAxis: {
      type: "category",
      data: ["08-27", "08-28", "08-29", "08-30", "08-31", "09-01", "09-02"],
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLabel: {
          color: chartsColor,
      },
    },
    yAxis: [
      {
        type: "value",
        interval: 40,
        min: 0,
        max: 200,
        axisLabel: {
          //这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
          formatter: "{value}%",
          color: chartsColor,
        },
        splitLine: { show: false },
      },
    ],
    series: [
      {
        data: [97, 98, 99, 97, 98, 90, 91],
        type: "line",
        smooth: true,
        areaStyle: {},
        itemStyle: {
          color: "#1c76e1",
        },
        label: {
          show: true,
          position: "top",
          color: chartsColor,
        },
        symbolSize: 6,
        symbol: "circle",
      },
    ],
  };
  let app = document.getElementById("appOff");
  appCharts = echarts.init(app);
  appCharts.setOption(option);
};
onMounted(() => {
  handleFn();
  alarmFn();
  trendFn();
  exigencyFn();
  videoFn();
  corpuscleFn();
  securityFn();
  appFn();
});
window.addEventListener("resize", () => {
  handleCharts.resize();
  alarmCharts.resize();
  trendCharts.resize();
  exigencyCharts.resize();
  videoCharts.resize();
  corpuscleCharts.resize();
  securityCharts.resize();
  appCharts.resize();
});
onUnmounted(() => {
  handleCharts.dispose();
  alarmCharts.dispose();
  trendCharts.dispose();
  exigencyCharts.dispose();
  videoCharts.dispose();
  corpuscleCharts.dispose();
  securityCharts.dispose();
  appCharts.dispose();
});
</script>
<style scoped>
.main {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.left > div {
  background: url("@/assets/bj1.png") no-repeat;
  background-size: 100% 100%;
}
.right > div {
  background: url("@/assets/bj2.png") no-repeat;
  background-size: 100% 100%;
}
.main div {
  width: 4rem;
  height: 2.1rem;
}
/*  */
</style>
